﻿<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <!-->
<html lang="zxx">
<!--
<![endif]-->

<head>
    <!-- TITLE OF SITE -->
    <title>电影推荐</title>
    <link rel="icon" href="images/logo2.png" >
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


    <!-- CSS Begins
================================================== -->
    <link href="layui/css/layui.css" rel="stylesheet">
    <!--Animate Effect-->
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/hover.css" rel="stylesheet">

    <!--Pretty Photo for Image Preview-->
    <link href="css/lightbox.css" rel="stylesheet">

    <!--Owl Carousel -->
    <link href="css/owl.carousel.css" rel="stylesheet">
    <link href="css/owl.transitions.css" rel="stylesheet">

    <!--BootStrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/normalize.css" rel="stylesheet">

    <!-- Main Style -->
    <link href="css/style.css" rel="stylesheet">

    <!--DEFAULT COLOR/ CURRENTLY USING , Replace Your Color-->
    <link rel="stylesheet" href="css/colors/default-color.css">



    <!--Replace Your Color Ends-->
    <!-- Template Demo Color  Examples -->
    <!-- Color 1
	<link rel="stylesheet" type="text/css" href="css/colors/one.css">
	-->
    <!-- Color 2
	<link rel="stylesheet" type="text/css" href="css/colors/two.css">
	-->
    <!-- Color 3
	<link rel="stylesheet" type="text/css" href="css/colors/three.css">
	-->
    <!-- Color 4
	<link rel="stylesheet" type="text/css" href="css/colors/four.css">
    -->
    <!-- END Template Color Demo Examples -->

    <!--[if IE]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>



    <![endif]-->
    <style>
        #contain{
            display: flex;
            width: 100%;
            height: 100%;

            align-items: center;
            justify-content: center;
        }
        #content{
            width: 80%;
            height: 100%;
            display: flex;
            align-items: center;
            flex-direction: column;

        }
        #name{
            width: 100%;
            height: 100px;
            display: flex;
            justify-content: left;
            border-bottom: 1px solid #b8b8b8;
            margin-bottom: 20px;

        }
        #movie{
            width: 100%;
            height: 500px;
            display: flex;

            flex-direction: row;

        }
        #movieimg{

            display: flex;
            flex-direction: column;
            height: 100%;
            width: 300px;
        }
        #pinglun{

            flex: 1;
        }
        #movieInfo{
            display: flex;
            flex-direction: column;
            width: 400px;
            height: 100%;
            align-items: center;
        }
        #main{

            flex: 1;
        }

        #font{
            width: 100%;
            height: 50px;
            border-bottom: 1px solid #b8b8b8;
            border-top: 1px solid #b8b8b8;
            margin-bottom: 20px;
            margin-top: 20px;
        }
        #recommend{
            width: 100%;
            height: 410px;

            display: flex;
            flex-direction: row;

        }
        #recom2{
            width: 100%;
            height: 410px;

            display: flex;
            flex-direction: row;
        }


        .recommendM{
            padding: 5px;

        }
        .recommendM p{
            text-align: center;
        }
        .recommendM img{
            width: 235px;
            height: 330px;


        }
        #name{
            font-size: 30px;
        }







    </style>

</head>


<body>

<!-- ::::::::::::::::::::::::::: Start: Preloader section :::::::::::::::::::::::::::-->
<div id="preloader"></div>
<!-- ::::::::::::::::::::::::::: End: Preloader section ::::::::::::::::::::::::::: -->


<div class="header_topbar">
    <!-- Logo -->
    <div class="container">
        <div id="welcome">睿道电影推荐</div>

    </div>
</div>
<!-- End: Header Info -->
<div id="contain">
    <div id="content">
        <div id="name">
            <h4 id="movieName"></h4>
        </div>
        <div id="movie">
            <div id="movieimg">
                <div id="img"></div>
                <div id="pinglun">
                    评星
                    <div id="test2"></div>

                </div>
            </div>
            <div id="movieInfo">

            </div>

            <div id="main">

            </div>
        </div>
        <div id="font">
            <p>喜欢这部电影的人也喜欢</p>
        </div>
        <div id="recommend">

            <div class="recommendM" >

            </div>


        </div>
        <div id="recom2">
            <div class="recommendM">

            </div>
        </div>





    </div>



</div>



<footer class="footer-section">
    <div class="container">
        <div class="row">



            <div class="subfooter">
                <div class="col-xs-6">
                    <p>Copyright &copy; 2020.Company name All rights reserved.<a target="_blank" href="index.html">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
                </div>
                <div class="col-xs-6">
                    <a class="scrollup" href="#"><span class="fa fa-long-arrow-up"></span></a>
                </div>
            </div>

        </div>
    </div>
</footer>



<!-- Scripts
========================================-->
<!-- jquery -->
<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- plugins -->
<script src="js/plugins.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>

<script src="layui/layui.js"></script>
<script>

</script>

<script src="js/main.js"></script>
<script type="text/javascript">
    var href = decodeURI(window.location.href);

    var movieId = href.split("?")[1].split("=")[1];
    var type = null;

        $.ajax({
            type:"get",
            url:"http://localhost:8888/getMoviesByIds.do",
            data:{
                "movieId":movieId
            },
            dataType:"json",
            success:function(response){

                var movies = response.data.list;


                for(var i=0;i<movies.length;i++){

                    var div = $("<div class='recommendM'></div>");
                    div.append("<a target='_blank' href='recommend.html?movieId="+movies[i].movieId+"'><img title='"+movies[i].movieName+"' alt='Movies' width='115px' height='164px' src='"+movies[i].imgurl+"'/></a>");
                    div.append("<p>电影名称："+movies[i].movieName+"</p>");
                    div.append("<p>评分："+movies[i].rate+"</p>");
                    if (i<5){
                        $("#recommend").append(div);
                    }
                    if (i>=5){
                        $("#recom2").append(div);
                    }

                }
                // 分页导航栏

            }
        })
</script>
<script type="text/javascript">

    $.ajax({
        type:"get",
        url:"http://localhost:8888/getMovieById.do",
        data:{
            "movieId":movieId
        },
        dataType:"json",
        success:function(response){
            var movie = response.data;
            var arrs = movie.actor.split("/");
            type = movie.type;
            //console.log(arrs);
            $("#movieName").append(movie.movieName);
            $("#img").append("<img src='"+movie.imgurl+"'><br>");

            $("#movieInfo").append("<p>导演："+movie.director+"</p><br>");


            $("#movieInfo").append("<p>主演："+arrs.slice(0,2)+"</p><br>");
            $("#movieInfo").append("<p>类型："+movie.type+"</p><br>");
            $("#movieInfo").append("<p>影片国家/地区："+movie.area+"</p><br>");
            $("#movieInfo").append("<p>语言："+movie.language+"</p><br>");
            $("#movieInfo").append("<p>片长："+movie.length+"分钟</p>");

        }
    })

</script>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));


    var catsData = [];
    var data = null;
    $.ajax({
        type:"get",
        url:"http://localhost:8888/getMovieById.do",
        data:{
            "movieId":movieId
        },
        dataType:"json",
        async:false,
        success:function(response){
            if(response.msg == "未登录，请重新登录"){
                alert("请重新登录");
                window.location.href="login.html";
            }
            data = response.data;
            catsData = data.star.split(",");
            console.log(catsData);





        }


    })
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '评分'+data.rate
        },
        tooltip: {},
        legend: {
            data:['评分次数']
        },
        xAxis: {
            data: ["1星","2星","3星","4星","5星"]
        },
        yAxis: {},
        series: [{
            name: '评分次数',
            type: 'bar',
            data: catsData
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<script>
    var rating = null;
    $.ajax({
        type: "get",
        url: "http://localhost:8888/getRating.do",
        data: {
            "movieId": movieId
        },
        dataType: "json",
        async: false,
        success: function (response) {

            if (response.msg == "未登录，请重新登录") {
                alert("请重新登录");
                window.location.href = "login.html";
            }else if (response.msg=="该用户没有对此电影做出评级"){
                rating =null;

            }else {
                rating = response.data;
                console.log(rating);
            }


        }
    })

    layui.use(['rate'], function(){
        var rate = layui.rate;
        if (rating == null){
            //显示文字

            rate.render({
                elem: '#test2'
                ,text: true //开启文本
                , choose: function (value) {
                    $.ajax({
                        type: "get",
                        url: "http://localhost:8888/addRating.do",
                        data: {
                            "movieId": movieId,
                            "type":type,
                            "rate":value
                        },
                        dataType: "json",
                        async: false,
                        success: function (response) {
                            if (response.msg == "未登录，请重新登录") {
                                alert("请重新登录");
                                window.location.href = "login.html";
                            }
                            alert("评论成功");
                            window.location.reload();

                        }
                    })
                }
            });
        }else{
            //显示文字
            rate.render({
                elem: '#test2'
                ,value: rating.rate //初始值
                ,text: true //开启文本
            });
        }






    });


</script>


</body>

</html>
